<template>
  <div class="glassmorphism-carousel-container">
    <a-carousel
      class="glassmorphism-carousel"
      :autoplay="config.autoplay"
      :dots="config.dots"
      :effect="config.effect"
      :autoplaySpeed="config.autoplaySpeed"
      ref="carouselRef"
    >
      <div v-for="(item, index) in items" :key="index" class="carousel-item">
        <div class="carousel-image-container">
          <img :src="item.imageUrl" :alt="item.title" class="carousel-image" />
          <div class="glassmorphism-overlay"></div>
          <div class="carousel-content">
            <h2 class="carousel-title">{{ item.title }}</h2>
            <p class="carousel-description">{{ item.description }}</p>
            <a-button
              v-if="item.buttonText"
              type="primary"
              class="carousel-button"
              @click="handleButtonClick(item)"
            >
              {{ item.buttonText }}
            </a-button>
          </div>
        </div>
      </div>
    </a-carousel>

    <!-- 左右切换按钮 -->
    <div class="carousel-arrows">
      <a-button class="arrow-btn" @click="prev">
        <template #icon><left-outlined /></template>
      </a-button>
      <a-button class="arrow-btn" @click="next">
        <template #icon><right-outlined /></template>
      </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, reactive } from 'vue'
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
import { getCarouselConfig } from '../api/carouselController'

// 轮播项类型定义
interface CarouselItem {
  id?: number
  scene?: string
  imageUrl: string
  title: string
  description: string
  buttonText?: string
  buttonLink?: string
  sort?: number
  status?: number
}

// 轮播图配置类型
interface CarouselConfig {
  autoplay: boolean
  autoplaySpeed: number
  dots: boolean
  effect: string
}

// 组件属性
const props = defineProps({
  scene: {
    type: String,
    default: 'home',
  },
  carouselItems: {
    type: Array as () => CarouselItem[],
    default: () => [],
  },
  autoplay: {
    type: Boolean,
    default: true,
  },
  dots: {
    type: Boolean,
    default: true,
  },
  effect: {
    type: String,
    default: 'scrollx',
  },
  autoplaySpeed: {
    type: Number,
    default: 5000,
  },
})

const carouselRef = ref()
const items = ref<CarouselItem[]>(props.carouselItems)
const config = reactive<CarouselConfig>({
  autoplay: props.autoplay,
  dots: props.dots,
  effect: props.effect as 'scrollx' | 'fade',
  autoplaySpeed: props.autoplaySpeed,
})

// 从后端或本地存储加载配置
const loadCarouselConfig = async () => {
  try {
    // 尝试从后端获取配置
    const res = await getCarouselConfig({ scene: props.scene })
    if (res.data && res.data.code === 0 && res.data.data) {
      if (res.data.data.config) {
        Object.assign(config, res.data.data.config)
      }
      if (res.data.data.items && res.data.data.items.length > 0) {
        items.value = res.data.data.items
        return
      }
    }
  } catch (error) {
    console.warn(`后端API未实现或出错，尝试使用本地存储(${props.scene})`, error)
    // 尝试从本地存储获取
    const storedData = localStorage.getItem(`carousel_config_${props.scene}`)
    if (storedData) {
      try {
        const parsedData = JSON.parse(storedData)
        if (parsedData.config) {
          Object.assign(config, parsedData.config)
        }
        if (parsedData.items && parsedData.items.length > 0) {
          items.value = parsedData.items
          return
        }
      } catch (e) {
        console.error('解析本地存储数据失败', e)
      }
    }
  }

  // 如果没有获取到数据，使用默认配置
  if (props.carouselItems.length > 0) {
    items.value = props.carouselItems
  } else {
    // 使用默认轮播图项
    items.value = getDefaultItemsForScene(props.scene)
  }
}

// 获取指定场景的默认轮播图项
const getDefaultItemsForScene = (scene: string): CarouselItem[] => {
  if (scene === 'home') {
    return [
      {
        imageUrl: '/img/view.jpg',
        title: '自然风光',
        description: '探索大自然的壮丽景色',
        buttonText: '了解更多',
        buttonLink: '/under-development',
        scene: 'home',
      },
      {
        imageUrl: '/img/city.jpg',
        title: '城市夜景',
        description: '繁华都市的迷人夜色',
        buttonText: '查看详情',
        buttonLink: '/under-development',
        scene: 'home',
      },
      {
        imageUrl: '/img/ai.png',
        title: 'AI指导',
        description: '感受艺术带来的无限灵感',
        buttonText: '艺术展览',
        buttonLink: '/ai',
        scene: 'home',
      },
      {
        imageUrl: '/img/food.jpg',
        title: '美食探索',
        description: '品味各地美食文化',
        buttonText: '美食指南',
        buttonLink: '/under-development',
        scene: 'home',
      },
    ]
  } else if (scene === 'anime') {
    return [
      {
        imageUrl: '/img/Anime.avif',
        title: '《通往夏天的隧道，再见的出口》',
        description: '浦岛隧道',
        buttonText: '探索更多',
        buttonLink: '/under-development',
        scene: 'anime',
      },
      {
        imageUrl: '/img/Anime1.avif',
        title: '罗小黑战记',
        description: '中国动画',
        buttonText: '观看详情',
        buttonLink: '/under-development',
        scene: 'anime',
      },
      {
        imageUrl: '/img/Anime2.avif',
        title: '鬼灭之刃',
        description: '炭治郎与祢豆子',
        buttonText: '了解更多',
        buttonLink: '/under-development',
        scene: 'anime',
      },
      {
        imageUrl: '/img/Anime3.avif',
        title: '刀剑神域',
        description: '亚丝娜',
        buttonText: '查看角色',
        buttonLink: '/under-development',
        scene: 'anime',
      },
    ]
  } else {
    return [
      {
        imageUrl: '/img/view.jpg',
        title: '默认轮播项',
        description: '请添加描述',
        buttonText: '点击按钮',
        buttonLink: '#',
        scene,
      },
    ]
  }
}

// 上一张
const prev = () => {
  carouselRef.value?.prev()
}

// 下一张
const next = () => {
  carouselRef.value?.next()
}

// 处理按钮点击
const handleButtonClick = (item: CarouselItem) => {
  if (item.buttonLink) {
    window.open(item.buttonLink, '_blank')
  }
}

// 预加载图片，提高性能
const preloadImages = () => {
  // 创建一个隐藏的图片元素来预加载
  items.value.forEach((item) => {
    const img = new Image()
    img.src = item.imageUrl
  })
}

// 组件挂载时加载配置和预加载图片
onMounted(async () => {
  await loadCarouselConfig()
  preloadImages()
})

// 添加默认导出
defineOptions({
  name: 'GlassmorphismCarousel',
})
</script>

<style scoped>
.glassmorphism-carousel-container {
  width: 100%;
  max-width: 100%;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.glassmorphism-carousel {
  width: 100%;
  height: 600px;
}

.carousel-item {
  height: 600px;
  color: #fff;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.carousel-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  will-change: transform;
}

/* 玻璃滤镜效果 - 简化性能消耗大的效果 */
.glassmorphism-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 43%;
  background: rgba(255, 255, 255, 0.15);
  /* 对低性能设备禁用模糊效果 */
  @media (pointer: fine) {
    backdrop-filter: blur(5px); /* 降低模糊半径 */
    -webkit-backdrop-filter: blur(5px);
  }
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* 简化阴影 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.carousel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px;
  z-index: 2;
  text-align: left;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

/* 鼠标悬浮时显示玻璃态效果和内容 */
.carousel-item:hover .glassmorphism-overlay,
.carousel-item:hover .carousel-content {
  opacity: 1;
}

.carousel-item:hover .carousel-content {
  transform: translateY(0);
}

.carousel-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 16px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.carousel-description {
  font-size: 1.2rem;
  margin-bottom: 24px;
  max-width: 600px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.carousel-button {
  font-size: 1rem;
  height: auto;
  padding: 8px 24px;
  border-radius: 24px;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.carousel-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #5d7df9, #9665d8);
}

/* 自定义轮播图指示器样式 */
.glassmorphism-carousel :deep(.slick-dots) {
  bottom: 16px;
}

.glassmorphism-carousel :deep(.slick-dots li button) {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.glassmorphism-carousel :deep(.slick-dots li.slick-active button) {
  background: #fff;
  width: 14px;
  height: 14px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .glassmorphism-carousel,
  .carousel-item {
    height: 400px;
  }

  .carousel-title {
    font-size: 1.8rem;
  }

  .carousel-description {
    font-size: 1rem;
  }

  .carousel-content {
    padding: 24px;
  }
}

@media (max-width: 576px) {
  .glassmorphism-carousel,
  .carousel-item {
    height: 300px;
  }

  .carousel-title {
    font-size: 1.5rem;
    margin-bottom: 8px;
  }

  .carousel-description {
    font-size: 0.9rem;
    margin-bottom: 16px;
  }

  .carousel-content {
    padding: 16px;
  }

  .carousel-button {
    padding: 6px 18px;
    font-size: 0.9rem;
  }
}

/* 左右切换按钮样式 */
.carousel-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 10;
}

.arrow-btn {
  width: 48px !important;
  height: 48px !important;
  background: rgba(190, 195, 206, 0.5) !important; /* 半透明蓝色背景 */
  border: none !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important; /* 圆角方形 */
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.arrow-btn:hover {
  background: rgba(190, 195, 206, 0.7) !important; /* 半透明蓝色背景 */
}

/* 确保图标居中显示并设置为白色 */
:deep(.anticon) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  color: white !important;
}
</style>
